<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '点单详情',
  },
}
</route>

<script setup>
import ActivityBaseInfo from '@/components/ActivityBaseInfo.vue'
import BottomOperateBox from '@/components/BottomOperateBox.vue'
import HistoryEvaluationItem from '@/components/HistoryEvaluationItem.vue'
import { currentPageNeedRefresh, nameMask, uniNavigateTo } from '@/utils'
import OrderApi from '@/service/order'
import { useUserStore } from '@/store/user'
import { useMessage } from 'wot-design-uni'

const userStore = useUserStore()

const message = useMessage()

const _isLogined = computed(() => userStore.isLogined)

const optionsId = ref('')
onLoad((options) => {
  const { id } = options
  if (id) {
    optionsId.value = id
    getShareOrderDetail()
    getShareOrderEvaluationPage()
  }
  // 监听评价列表刷新事件
  uni.$on('updateShareEvaluationList', () => {
    getShareOrderEvaluationPage()
  })
  // 监听预约成功事件
  uni.$on('bookingOrderSuccess', () => {
    getShareOrderDetail()
  })
})

onShow(() => {
  _isLogined.value && judgeShareOrderEvaluation()
})

onUnload(() => {
  // 移除评价列表刷新事件
  uni.$off('updateShareEvaluationList')
  // 移除预约成功事件
  uni.$off('bookingOrderSuccess')
})

const detailData = ref({
  name: '',
  startDate: '',
  endDate: '',
  contacts: '',
  sysOrgCode_dictText: '',
  type_dictText: '',
  note: '',
  phone: '',
  realTimes: '', // 实际点单数
  times: '', // 最大预约次数
})
const getShareOrderDetail = async () => {
  const { code, result } = await OrderApi.getShareOrderDetail({
    id: optionsId.value,
  })
  if (code === 200) {
    detailData.value = result
  }
}
const infoDescList = computed(() => {
  const { startDate, endDate, contacts, realResourceTimes, times } =
    detailData.value
  return [
    { label: '供单单位', value: detailData.value.sysOrgCode_dictText },
    { label: '活动类型', value: detailData.value.type_dictText },
    { label: '剩余场次', value: realResourceTimes },
    { label: '联系人', value: nameMask(contacts) },
    { label: '活动时间', value: `${startDate} ~ ${endDate}` },
  ]
})

const swiperList = computed(() => {
  return detailData.value.coverUrl ? detailData.value.coverUrl.split(',') : []
})

const tabList = [
  { label: '供单内容', value: 1 },
  { label: '历史评价', value: 2 },
]
const activeTab = ref(tabList[0].value)

const evaluationList = ref([])
const getShareOrderEvaluationPage = async () => {
  const params = {
    pageNo: 1,
    pageSize: 6,
    // id,
    // orderSubscribeId: id,
    orderId: optionsId.value,
    column: 'createTime',
    order: 'desc',
  }
  const { code, result } = await OrderApi.getShareOrderEvaluationPage(params)
  if (code === 200 && result) {
    const { records } = result
    if (records?.length) {
      evaluationList.value = records
    }
  }
}

const isEvaluation = ref(false)
const judgeShareOrderEvaluation = async () => {
  const { code, result } = await OrderApi.judgeShareOrderEvaluation({
    orderId: optionsId.value,
  })
  if (code === 200) {
    isEvaluation.value = result > 0 // 大于0表示已评价
  }
}

const goPage = (path) => {
  console.log('path', path)
  if (_isLogined.value) {
    uniNavigateTo(path)
  } else {
    message
      .confirm({
        msg: '您还未登录，是否去登录？',
        title: '提示',
      })
      .then(() => {
        uniNavigateTo('/pages/login/index')
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}

const goApply = () => {
  if (detailData.value.realResourceTimes <= 0) {
    uni.showToast({
      title: '活动剩余场次为0',
      icon: 'none',
    })
    return
  }
  // goPage(`/pages-sub/share-menu/order-apply/index?id=${detailData.value.id}`)
  goPage(`/pages-sub/order-serve/booking/index?id=${detailData.value.id}`)
}

const goEvaluation = () => {
  if (isEvaluation.value) {
    uni.showToast({
      title: '您已评价，不能重复评价',
      icon: 'none',
    })
    return
  }
  goPage(`/pages-sub/share-menu/evaluation/index?id=${detailData.value.id}`)
}
</script>

<template>
  <view class="common-page-bg pb-160rpx">
    <view class="p-24rpx">
      <template v-if="detailData.coverUrl">
        <view
          v-if="swiperList.length > 1"
          class="mb-24rpx"
        >
          <wd-swiper
            :list="swiperList"
            autoplay
            stop-autoplay-when-video-play
            :autoplay-video="false"
            :indicator="{ type: 'dots-bar' }"
          ></wd-swiper>
        </view>
        <view
          v-else
          class="mb-24rpx"
        >
          <wd-img
            custom-class="w-full h-400rpx"
            round
            radius="16rpx"
            :src="detailData.coverUrl"
            :preview-src="detailData.coverUrl"
            enable-preview
            mode="aspectFill"
          />
        </view>
      </template>
      <ActivityBaseInfo
        :name="detailData.name"
        :desc-list="infoDescList"
        :phone="detailData.phone"
      />
      <view class="tab-box">
        <view class="tab-header">
          <view
            v-for="item in tabList"
            :key="item.value"
            class="tab-header-item"
            :class="{ active: activeTab === item.value }"
            @click="activeTab = item.value"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="tab-container">
          <view
            v-if="activeTab === 1"
            class="p-32rpx"
          >
            <view class="content-item">
              <view class="content-item-label">活动类型</view>
              <view class="content-item-value">
                {{ detailData.type_dictText }}
              </view>
            </view>
            <view class="content-item">
              <view class="content-item-label">活动介绍</view>
              <view class="content-item-value">
                {{ detailData.note }}
              </view>
            </view>
          </view>
          <view
            v-if="activeTab === 2"
            class="px-32rpx"
          >
            <template v-if="evaluationList.length">
              <HistoryEvaluationItem
                v-for="item in evaluationList.slice(0, 5)"
                :key="item.id"
                :info="item"
              />
              <view
                v-if="evaluationList.length > 5"
                class="show-more"
                @click="
                  uniNavigateTo(
                    `/pages-sub/share-menu/evaluation-list/index?id=${optionsId}`,
                  )
                "
              >
                <text>查看更多</text>
                <wd-icon
                  name="chevron-right"
                  size="32rpx"
                ></wd-icon>
              </view>
            </template>
            <view
              v-else
              class="p-32rpx"
            >
              <wd-status-tip
                image="content"
                tip="暂无内容"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <BottomOperateBox>
      <wd-button
        v-if="activeTab === 1"
        custom-class="common-main-btn"
        @click="goApply"
      >
        立即预约活动
      </wd-button>
      <wd-button
        v-if="activeTab === 2"
        custom-class="common-main-btn"
        @click="goEvaluation"
      >
        立即评价
      </wd-button>
    </BottomOperateBox>

    <wd-message-box />
  </view>
</template>

<style lang="scss" scoped>
.tab-box {
  margin-top: 24rpx;
  background: #fff;
  border-radius: 16rpx;

  .tab-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid $uni-border-color;

    .tab-header-item {
      position: relative;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90rpx;
      font-size: 28rpx;
      color: $uni-text-color-grey;

      &.active {
        font-weight: 500;
        color: $uni-text-color;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 120rpx;
          height: 4rpx;
          background-image: linear-gradient(92deg, #67bdf6 0%, #2c84db 100%);
          border-radius: 2px;
        }
      }
    }
  }

  .content {
    padding: 32rpx;

    &-item {
      display: flex;
      margin-bottom: 24rpx;

      &-label {
        flex-shrink: 0;
        width: 160rpx;
        font-size: 28rpx;
        color: $uni-text-color-grey;
      }

      &-value {
        flex: 1;
        font-size: 28rpx;
        color: $uni-text-color;
      }
    }
  }
}

.show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  font-size: 24rpx;
  color: $uni-color-primary;
}

.bottom-area {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}
</style>
